<extend name="work/base"/>
<block name="content">
    <div class="panel panel-default panel-intro">
        <div class="panel-body">
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title" id="LAY_mine">
                    <li class="layui-this" lay-id="info">我的资料</li>
                    <li lay-id="avatar">头像</li>
                    <li lay-id="pass">密码</li>
                </ul>
                <div class="layui-tab-content" style="padding: 20px 0;">
                    <div class="layui-form layui-form-pane layui-tab-item layui-show">

                        <div class="layui-row">
                            <div class="layui-col-md9">
                                <form method="post" action="{:url('updateNickname')}">
                                    <div class="layui-form-item">
                                        <label  class="layui-form-label">登录名</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="{$info.username}" disabled="disabled"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label  class="layui-form-label">姓名</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="nickname" required="" lay-verify="required"
                                                   autocomplete="off" value="{$info.nickname}" class="layui-input">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">当前只有姓名可以修改！</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">上次登陆时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="{$info.last_login_time|date='Y-m-d H:i'}"
                                                   disabled="disabled" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">上次登陆IP</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="{$info.last_login_ip}" class="layui-input"
                                                   disabled="disabled">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">绑定微信</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="<empty name='info.openid'>没有<else/>已经绑定</empty>"
                                                   class="layui-input" disabled="disabled">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit
                                                lay-filter="layform">确认修改
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <div class="layui-col-md3">
                                <div class="layui-card">
                                    <div class="layui-card-header">绑定微信</div>
                                    <div class="layui-card-body " >
                                        <blockquote class="layui-elem-quote">
                                            <img src="" width="200" id="qrcode">
                                            <br>
                                            <div id="endtime"></div>
                                            说明用微信扫描上面二维码就能及时接收项目信息<br>
                                            原来绑定的会被当前覆盖<br>
                                        </blockquote>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form layui-form-pane layui-tab-item">
                        <div class="layui-form-item">
                            <div class="layui-form-item">
                                <div class="avatar-add">
                                    <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过30KB</p>
                                    <div class="upload-img">
                                        <button type="button" class="layui-btn layui-btn-primary file" id="test1">
                                            <i class="layui-icon">&#xe67c;</i>上传头像
                                            <input type="file" name="" id="face_file">
                                        </button>
                                    </div>
                                    <div class="img">
                                        <img src="{$info.face}" id="face_img">
                                    </div>
                                    <span class="loading"></span>
                                    <style>
                                        .file {
                                            position: relative;
                                            display: inline-block;
                                            background: #D0EEFF;
                                            border: 1px solid #99D3F5;
                                            border-radius: 4px;
                                            padding: 4px 12px;
                                            overflow: hidden;
                                            color: #1E88C7;
                                            text-decoration: none;
                                            text-indent: 0;
                                            line-height: 20px;
                                        }
                                        .file input {
                                            position: absolute;
                                            font-size: 100px;
                                            right: 0;
                                            top: 0;
                                            opacity: 0;
                                        }
                                        .file:hover {
                                            background: #AADFFD;
                                            border-color: #78C3F3;
                                            color: #004974;
                                            text-decoration: none;
                                        }
                                    </style>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form layui-form-pane layui-tab-item">
                        <form class="form" action="{:url( 'updatePassword')}">
                            <div class="layui-form-item">
                                <label class="layui-form-label">原密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="old_password" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>

                            </div>
                            <div class="layui-form-item">
                                <label  class="layui-form-label">新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                            </div>
                            <div class="layui-form-item">
                                <label  class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="re_password" required="" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="layform">
                                    确认修改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="script">
    <script charset="utf-8" src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
    <script type="text/javascript">
        layui.use([ 'layer', 'util'], function () {
            var $ = layui.$
                , util = layui.util;
            qrcode()
            var myVar = setInterval(qrcode, 7000);

            function qrcode() {
                $.ajax({
                    url: '{:url("qrcode")}',
                    type: 'POST',
                    dataType: 'json'
                })
                    .done(function (res) {
                        if (res.code == 0) {
                            $('#qrcode').attr('src', res.url);
                        } else {
                            window.location.href = res.url
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            offset: 'rt',
                            anim: 5
                        });
                    })
                    .always(function () {
                    });
            }

            $('#face_file').on('change',function () {
                var index = layer.load(1);
                var files=this.files[0];
                if(files){
                    $.ajax({
                        type: "post",
                        url: "/qiniu/gettoken",
                        async: true,
                        success: function (res) {
                            if (res.code == 0) {
                                var token = res.uptoken;

                                console.log(files);
                                var fileName = res.path + files.name;
                                var downloadurl = res.downloadurl;
                                var config = {
                                    retryCount: 6,
                                };
                                var putExtra = {
                                    fname: "",
                                    params: {},
                                    mimeType: null
                                };
                                var observable = qiniu.upload(files, fileName, token, putExtra, config);
                                var subscription = observable.subscribe(
                                    {
                                        next(res) {
                                            console.log(res)
                                        },
                                        error(res) {
                                            console.log(res)
                                        },
                                        complete(res) {
                                            $.post("{:url( 'updateFace')}", 'face=' +res.key, function (data) {
                                                if (data.code == 1) {
                                                    $('#face_img').attr('src', downloadurl + '?file=' +res.key);
                                                } else {
                                                    layer.msg(data.msg);
                                                }
                                                layer.close(index);
                                            });


                                        }
                                    }
                                );

                            } else {
                                console.log(res.msg)
                            }

                        }
                    });
                }

            });

        });
    </script>
</block>